  <template>
    <el-card shadow="never" class="border-0">
      <!-- 搜索 -->
      <el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="工程师">
              <el-select v-model="searchForm.engineerId" filterable placeholder="工程师">
                <el-option v-for="item in engineerList" :key="item.id" :label="item.realName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="工单时间">
              <el-date-picker style="width: 150px" v-model="searchForm.startDate" type="date" placeholder="开始时间"
                format="YYYY-MM-DD" value-format="YYYY-MM-DD">
              </el-date-picker>
              &nbsp; - &nbsp;
              <el-date-picker style="width: 150px" v-model="searchForm.endDate" type="date" placeholder="结束时间"
                format="YYYY-MM-DD" value-format="YYYY-MM-DD">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <div class="flex items-center justify-end">
              <el-button type="primary" @click="initTableData(1)">搜索</el-button>
              <el-button @click="resetSearchForm">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>

      <!-- 新增|刷新 -->
      <div class="flex items-center justify-between mb-4">
        <div></div>

        <el-tooltip effect="dark" content="刷新数据" placement="top">
          <el-button text @click="initTableData">
            <el-icon :size="20">
              <Refresh />
            </el-icon>
          </el-button>
        </el-tooltip>
      </div>

      <!-- 表格数据 -->
      <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
        <el-table-column label="工程师" align="center">
          <template #default="{ row }">
            {{ row.realName }}
          </template>
        </el-table-column>

        <el-table-column label="项目工时" align="center">
          <template #default="{ row }">
            {{ row.projectWorkHour }}
          </template>
        </el-table-column>

        <el-table-column label="自核工时" align="center">
          <template #default="{ row }">
            {{ row.selfCheckWorkHour }}
          </template>
        </el-table-column>

        <el-table-column label="记录工时" align="center">
          <template #default="{ row }">
            {{ row.recordWorkHour }}
          </template>
        </el-table-column>

        <el-table-column label="在途工时" align="center">
          <template #default="{ row }">
            {{ row.onTheWayWorkHour }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="250" align="center">
          <template #default="scope">
            <el-button type="primary" size="small" @click="showDetails(scope.row)" text>详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div class="flex items-center justify-center mt-5">
        <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage"
          :page-size="limit" @current-change="initTableData" />
      </div>
    </el-card>

    <!-- 工时明细 -->
    <SystemDialog title="查看明细" :visible="dialogTableVisible_workHour" :height="50" :width="70" :showOkBtn="false"
      @on-close="dialogTableVisible_workHour = false" @on-confirm="dialogTableVisible_workHour = false">
      <template v-slot:content>
        <!-- 表格数据 -->
        <el-table v-if="dialogTableVisible_workHour" :data="workHourDetailsList" stripe style="width: 100%">
          <el-table-column label="日期" align="center">
            <template #default="{ row }">
              {{ dateFormatterDay(row.day) }}
            </template>
          </el-table-column>

          <el-table-column label="项目工时" align="center">
            <template #default="{ row }">
              {{ row.projectWorkHour }}
            </template>
          </el-table-column>

          <el-table-column label="自核工时" align="center">
            <template #default="{ row }">
              {{ row.selfCheckWorkHour }}
            </template>
          </el-table-column>

          <el-table-column label="记录工时" align="center">
            <template #default="{ row }">
              {{ row.recordWorkHour }}
            </template>
          </el-table-column>

          <el-table-column label="在途工时" align="center">
            <template #default="{ row }">
              {{ row.onTheWayWorkHour }}
            </template>
          </el-table-column>
        </el-table>
      </template>
    </SystemDialog>
  </template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import SystemDialog from "~/components/SystemDialog.vue";
import { toast, toastWarn } from "~/composables/util";
import { getXDaysAgo } from "~/utils/common.js";
import { api_user_list } from "~/api/userApi";
import { dateFormatter, dateFormatterDay } from '~/utils/common.js'
import { formatDeviceSoldStatus, workHourList } from "~/api/supply";

//0：项目工时 1：自核工时 2：记录工时 3：在途工时
const workHourType = ref([
  { key: 0, value: "项目工时" },
  { key: 1, value: "自核工时" },
  { key: 2, value: "记录工时" },
  { key: 3, value: "在途工时" },
]);

// 分页
const currentPage = ref(1);
const total = ref(0);
const limit = ref(10);
const tableData = ref([]);
const loading = ref(false);
// 工程师列表
const engineerList = ref([]);

// 工时明细
const dialogTableVisible_workHour = ref(false);
const workHourDetailsList = ref([]);

// 查询条件
const searchForm = reactive({
  engineerId: null,
  startDate: null,
  endDate: null,
  page: currentPage.value,
  size: limit.value,
});
// 重置搜索框
const resetSearchForm = () => {
  searchForm.engineerId = null;
  searchForm.startDate = null;
  searchForm.endDate = null;
  initTableData(1);
};

// 生命周期函数
onMounted(() => {
  //加载工程师列表
  initEngineerList();

  //初始化列表数据
  initTableData();
});

// 获取数据
function initEngineerList() {
  //请求参数
  let paramIo = { roleId: 4, page: 1, size: 10000 };
  api_user_list(paramIo)
    .then((res) => {
      if (res) {
        engineerList.value = res.records;
      }
    })
    .catch((err) => {
      console.log("查询工程师列表错误:", err);
    });
}

// 获取数据
function initTableData(p = null) {
  //指定页码是否为空
  if (typeof p == "number") {
    currentPage.value = p;
  }

  loading.value = true;
  searchForm.page = currentPage.value;

  if (searchForm.endDate == null && searchForm.startDate == null) {
    searchForm.startDate = getXDaysAgo(7);
    searchForm.endDate = getXDaysAgo(0);
  }

  workHourList(searchForm)
    .then((res) => {
      if (res) {
        tableData.value = res.records;
        total.value = res.total;
      } else {
        tableData.value = [];
        total.value = 0;
      }
    })
    .finally(() => {
      loading.value = false;
    });
}

// 格式化工时类型
function formatWorkHourType(type) {
  return workHourType.value?.filter(o => o.key == type)[0].value;
}
// 展示详情
function showDetails(row) {
  workHourDetailsList.value = row.details;
  dialogTableVisible_workHour.value = true;
}
</script>